<template>
  <div>
    <div class="search-bar">
       <van-row>
            <van-col span="3"><img :src="locationIcon" width="80%" class="location-icon"/></van-col>
            <van-col span="16">
                <input type="text" class="search-input"/>
            </van-col>
            <van-col span="5">
                <van-button size="mini">查找</van-button>
            </van-col>
      </van-row>
    </div>


    <div class="swiper-area">
        <van-swipe :autoplay="3000">
        <van-swipe-item v-for="(banner,index) in bannerPicArray" :key="index">
            <!-- <img :src="banner.imageUrl" width="100%"/> -->
             <img v-lazy="banner.image" width="100%"/>
        </van-swipe-item>
        </van-swipe>
    </div>

    <div class="type-bar">
        <div class="type-item" v-for="(cate,index) in category" :key="index">
            <img v-lazy="cate.image" width="90%"/>
            <span>{{cate.mallCategoryName}}</span>
        </div>
    </div>

    <div class="ad-banner">
         <img v-lazy="adBanner.PICTURE_ADDRESS" width="100%">
    </div>

    <div class="recommend-area">
        <div class="recommend-title">商品推荐</div>
        <div class="recomment-body">
            <swiper :options="swiperOption">
                <swiper-slide v-for="(item , index) in recommendGoods" :key="index">
                    <div class="recommend-item">
                        <img :src="item.image" width="80%"/>
                        <div>{{item.goodsName}}</div>
                        <div>￥{{item.price|moneyFilter}} (￥{{item.mallPrice|moneyFilter}})</div>
                    </div>
                </swiper-slide>
            </swiper>
        </div>
    </div>

     <floor-component :floorData="floor1" :floorTitle="floorName.floor1"></floor-component>
     <floor-component :floorData="floor2" :floorTitle="floorName.floor2"></floor-component>
     <floor-component :floorData="floor3" :floorTitle="floorName.floor3"></floor-component>
    <!-- <div class="floor">
        <div class="floor-anomaly">
            <div class="floor-one">
                <img :src="floor1_0.image" width="100%"/>
            </div>
            <div>
                <div class="floor-two"><img :src="floor1_1.image" width="100%"/></div>
                <div><img :src="floor1_2.image" width="100%"/></div>
            </div>
        </div>
        <div class="floor-rule">
            <div v-for="(item ,index) in floor1.slice(3)" :key="index">
                <img :src="item.image" width="100%"/>
            </div>
        </div>
    </div> -->
    <div class="hot-area">
        <div class="hot-title">热卖商品</div>
        <div class="hot-goods">
            <van-list>
                <van-row gutter="20">
                    <van-col span="12" v-for="(item,index) in hotGoods" :key="index">
                        <!-- <div>{{item.name}}</div> -->
                        <goods-info :goodsId="item.goodsId" :goodsImage="item.image" :goodsName="item.name" :goodsPrice="item.price"></goods-info>
                    </van-col>
                </van-row>
            </van-list>
        </div>
    </div>

  </div>
</template>
<script>
    import axios from 'axios'
    import 'swiper/dist/css/swiper.css'
    import { swiper,swiperSlide} from 'vue-awesome-swiper'
    import floorComponent from '../component/floorComponent'
    import {toMoney} from '@/filter/moneyFilter.js'
    import goodsInfo from '../component/goodsInfoComponent'
    import url from '@/serviceAPI.config.js'
    export default {
        //在需要的页面以component 的形式引入
        components:{
            swiper,
            swiperSlide,
            floorComponent,
            goodsInfo
        },
        filters:{
            moneyFilter(money){
                return toMoney(money)
            }
        },
        data(){
            return {
                //添加分页器
                swiperOption:{
                    slidesPerView:3
                },
                locationIcon: require('../../assets/images/locationicon.png'),
                // bannerPicArray:[
                //     {imageUrl:'http://7xjyw1.com1.z0.glb.clouddn.com/simleVueDemoPic001.jpg'},
                //     {imageUrl:'http://7xjyw1.com1.z0.glb.clouddn.com/simleVueDemoPic002.jpg'},
                //     {imageUrl:'http://7xjyw1.com1.z0.glb.clouddn.com/simleVueDemoPic003.jpg'},
                // ],
                bannerPicArray:[],
                category:[],
                adBanner:'',
                recommendGoods:[],
                floor1:[],
                floor2:[],
                floor3:[],
                floorName:{},
                hotGoods:[],
            }
        },

        created(){
            axios({
                // url:'https://www.easy-mock.com/mock/5b592190e4e04f38c7a558b9/aicode/index',
                url:url.getShoppingMallInfo,
                method:'get',
            }).then(response=>{
                console.log(response);
                if(response.status==200){
                    //导航的数据
                    this.category = response.data.data.category;
                    //广告banner的数据
                    this.adBanner = response.data.data.advertesPicture;
                    //轮播数据
                    this.bannerPicArray = response.data.data.slides;
                    //获取推荐商品数据
                    this.recommendGoods = response.data.data.recommend; 
                    //获取楼层1的数据
                    this.floor1 = response.data.data.floor1;
                    // this.floor1_0 = this.floor1[0]
                    // this.floor1_1 = this.floor1[1]
                    // this.floor1_2 = this.floor1[2]
                    this.floor2 = response.data.data.floor2;
                    this.floor3 = response.data.data.floor3;
                    //楼层名称
                    this.floorName = response.data.data.floorName
                    //热卖商品
                    this.hotGoods = response.data.data.hotGoods
                }
            }).catch(err=>{
                console.log(err);
            })
        }
    }
</script>
<style scoped>
   .search-bar{
      height: 2.2rem;
      background-color: #e5017d;
      line-height:2.2rem;
      overflow: hidden;
  }
  .search-input{
      width:100%;
      height: 1.3rem;
      border-top:0px;
      border-left:0px;
      border-right:0px;
      border-bottom: 1px solid 1px !important ;
      background-color: #e5017d;
      color:#fff;
  }
  .location-icon{
      padding-top: .2rem;
      padding-left: .3rem;
  }
  .swiper-area{
      max-height:15rem;
      clear: both;
      overflow: hidden;
  }
  .type-bar{
      background-color: #ffffff;
      margin:0 .3rem .3rem .3rem;
      border-radius: .3rem;
      font-size:14px;
      display: flex;
      flex-direction:row;
      flex-wrap:nowrap;
  }
   .type-bar div{
      padding: .3rem;
      font-size: 12px;
      text-align: center;
  }
 .recommend-area{
     background-color:#fff;
    margin-top: .3rem;
 }
 .recommend-title{
      border-bottom:1px solid #eee;
      font-size:14px;
      padding:.2rem;
      color:#e5017d;
  }
.recommend-body{
    border-bottom: 1px solid #eee;
}
 .recommend-item{
      width:99%;
      border-right: 1px solid #eee;
      font-size: 12px;
      text-align: center;
  }
 .hot-area{
      text-align: center;
      font-size:14px;
      height: 1.8rem;
      line-height:1.8rem;
  }
 .goods-name{
        padding: 0 8px;
       overflow: hidden;
       text-overflow: ellipsis;
       white-space:nowrap; 
    }
    /*解决图片大小不一*/
    .type-item{
      flex:1;
  }
</style>


